<template>
  <div class="info-list">
    <el-row v-for="(item , index) in infoList" :key="soleKey + index">
      <el-col v-for="(i , j) in item" :key="item.key" :span="24 / item.length">
        <div class="info-content" :style="{'--width':(i.width ? i.width : 80 ) + 'px' }">
          <p :class="['title',{'tip-width':j % 2 === 1}]" :style="'width:$width'" :title="i.title">{{i.title}}：</p>
          <p class="value" :style="`width: calc(100% - ${i.width ? i.width : 80 }px)`" :title="i.value">{{i.value}}</p>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "infoList",
  props:{
    infoList:{
      type:Array,
      default:()=>[]
    },
    soleKey:{
      type:String,
      default:''
    }
  }
}
</script>

<style lang="scss" scoped>
$valueWidth:var(--width);
.info-content {
  line-height: 36px;
  width: 100%;
  display: flex;
  align-items: center;
}
.title {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #909399;
  max-width: $valueWidth;
  width: $valueWidth;
  white-space: nowrap;
  min-width: $valueWidth;
  text-align: right;
}
.value {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #606266;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.tip-width {
  max-width: 110px;
  width: 110px;
}
</style>
